import React, { Component } from 'react'
import { getSongdetail } from "../../api"
import './newSing.css/header.css';
import { Flex, WhiteSpace } from 'antd-mobile';
import { withRouter } from "react-router-dom"

import one from '../images/7_03.jpg';
import two from '../images/8_03.jpg';
import three from '../images/9_03.jpg';


import six from '../images/12_03.jpg';
import seven from '../images/13_03.jpg'
import eight from '../images/14_03.jpg'
import nine from '../images/15_03.jpg'
import ten from '../images/16_03.jpg'

class Header extends Component {
    constructor() {
        super()
        this.state = {
            list: []
        }
    }
    componentDidMount() {

        let id = this.props.location.state.id
        // console.log(id)
        getSongdetail(id).then(res => {
            console.log(res.data)
            let obj = {
                name: res.data.playlist.name,
                playcount: res.data.playlist.playCount,
                description: res.data.playlist.description,
                nickname: res.data.playlist.creator.nickname,
                coverImgUrl:res.data.playlist.coverImgUrl,
                commentCount:res.data.playlist.commentCount,
                shareCount:res.data.playlist.shareCount,
                avatarUrl:res.data.playlist.creator.avatarUrl
            }
            this.setState({
                list: obj
            })
        })

    }
    change(id){
        this.props.history.push('/find')
    }
    handler(id){
        this.props.history.push('/Discuss')
    }
    render() {
        console.log(this.state.list)
        return (
            <div>
                <div className='header-1'>
                    <img src={one} alt="" className='header-1-img1' onClick={this.change.bind(this)}/>
                    <img src={two} alt="" className='header-1-img2' />
                    <img src={three} alt="" className='header-1-img3' />
                    <span>歌单</span>
                    <p>编辑推荐：所有的过往，都是岁月的一种恩赐</p>
                </div>
                
                <div className='header-2'>
                    <img src={this.state.list.coverImgUrl} alt="" className='header-2-img1' />
                    <h2>{this.state.list.name}</h2>
                    <img src={this.state.list.avatarUrl} alt="" className='header-2-img2' />
                    <span>{this.state.list.nickname}</span>
                    <img src={six} alt="" className='header-2-img3' />
                    <p>{this.state.list.description}</p>
                    <h5>❤{Math.round(this.state.list.playcount/10000)}万</h5>
                </div>
                <div className='header-3'>
                    <Flex>
                        <Flex.Item>
                            <img src={seven} alt="" onClick={this.handler.bind(this)}/>
                            <span>{this.state.list.commentCount}</span>
                        </Flex.Item>
                        <Flex.Item>
                            <img src={eight} alt="" />
                            <span>{this.state.list.shareCount}</span>
                        </Flex.Item>
                        <Flex.Item>
                            <img src={nine} alt="" />
                            <span>下载</span>
                        </Flex.Item>
                        <Flex.Item>
                            <img src={ten} alt="" />
                            <span>多选</span>
                        </Flex.Item>
                    </Flex>
                    <WhiteSpace size="lg" />
                </div>

            </div>
        )
    }
}

export default withRouter(Header)